0
<template>
  <view class="container">
    <view class="no-logged" v-if="!isLogin">
      <button @click="integrals" type="primary">立即登录</button>
      <button class="mt-20" @click="go" type="primary" plain="true">现在点单</button>
    </view>
    <view v-else>
      <view class="tabs">
        <view class="item" :class="{ active: tabIndex === index }" @tap="switchTab(index)" v-for="(tab, index) in tabList" :key="index">
          {{ tab.name }}
        </view>
      </view>
      <view class="mt-30">
        <!-- 订单列表 begin -->
        <swiper class="swiper" :show-scrollbar="false" v-if="orders.length > 0">
          <swiper-item @touchmove.stop="true">
            <view class="history-order">
              <swiper :show-scrollbar="false" class="history-order-swiper">
                <swiper-item @touchmove.stop="true">
                  <scroll-view scroll-y="true" class="orders-scroll">
                    <view class="pl-30 pr-30">
                      <view class="order-list border-radius-10" v-for="(order, index) in orders" :key="index" @click="toDedail(order)">
                        <view class="header border-b">
                          <view class="fsize-32 line-black fweigh-600">{{ order.storeName }}</view>
                          <view class="fsize-28 line-yellow">{{ order.stateName }}</view>
                        </view>
                        <scroll-view scroll-x>
                          <view class="images">
                            <view v-for="(item, index) in order.foodData" :key="index">
                              <image :src="item.image"></image>
                              <view class="text-align-center">x{{ item.quantity }}</view>
                            </view>
                          </view>
                        </scroll-view>
                        <view class="info">
                          <view class="left">
                            <view>订单编号:{{ order.orderId }}</view>
                            <view class="mt-10">下单时间:{{ order.orderDate }}</view>
                          </view>
                          <view class="right text-align-right">
                            <view class="fweigh-600">
                              <text class="fsize-30">￥</text>
                              <text class="fsize-40">{{ order.sumAllAmount }}</text>
                            </view>
                            <view class="fsize-26 line-gray mt-10">共{{ order.sumQuantity }}件</view>
                          </view>
                        </view>
                        <view class="action" @click.stop>
                          <!-- <button type="default" hover-class="none">查看评论</button> -->
                          <!-- <button type="primary" plain hover-class="none">立即支付</button> -->
                          <u-button plain v-if="order.status === 0" color="#F3C35C" text="立即支付" @click="onPayment(order.orderId)"></u-button>
                        </view>
                      </view>
                    </view>
                  </scroll-view>
                </swiper-item>
              </swiper>
            </view>
          </swiper-item>
        </swiper>
        <!-- 订单列表 end -->
        <view class="store-order-wrapper" v-else>
          <image src="/static/images/order/default_img_order.png"></image>
          <view>您还没有下单</view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapState } from 'vuex';
// import { requestPayment } from '@/utils/payment'
import { pay } from '@/common/util.js';
export default {
  data() {
    return {
      tabIndex: 0,
      tabList: [{ name: '全部订单' }, { name: '堂食订单' }, { name: '外带订单' }],
      orderMenuIndex: 0,
      orders: [],
      searchData: {
        FType: 0, // 2 打包订单 1 堂食 0全部
        pageIndex: 0,
        pageSize: 20
      },
      loadMore: false
    };
  },
  onLoad() {
    this.getOrders();
  },
  onShow(opt) {
    if (!uni.$u.test.isEmpty(opt)) {
      if (opt.isRefresh) {
        this.getOrders();
      }
    }
  },
  onReachBottom() {
    if (this.loadMore) {
      this.getOrders();
    }
  },
  computed: {
    ...mapState(['isLogin', 'stock']),
    batchInvoiceVisible() {
      return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length);
    }
  },
  methods: {
    go() {
      uni.switchTab({ url: '/pages/tab_bar/classify/classify' });
    },
    toDedail(row) {
      uni.navigateTo({
        // url:'/pages/order/detail?orderdes=' + encodeURIComponent(JSON.stringify(row))
        url: '/pages/order/detail?orderId=' + row.orderId
      });
    },
    async switchTab(index) {
      if (this.tabIndex === index) return;
      this.tabIndex = index;
      this.searchData.FType = index;
      this.searchData.pageIndex = 0;
      this.orders = [];
      await this.getOrders();
    },
    async switchMenuTab(index) {
      if (this.orderMenuIndex === index) return;
      this.orderMenuIndex = index;
      await this.getOrders();
    },
    getOrders() {
      if (this.isLogin) {
        this.$api.GetOrderList({ ...this.searchData, storeId: this.stock.id }).then((res) => {
          this.orders = [...this.orders, ...res.data.list];
          if (res.data.rowcount > this.orders.length) {
            this.searchData.pageIndex++;
            this.loadMore = true;
          } else {
            this.loadMore = false;
          }
        });
      }
    },
    integrals() {
      if (!this.isLogin) {
        uni.navigateTo({ url: '/pages/login/login' });
      }
    },
    onPayment(orderId) {
      pay(orderId);
      // let that = this
      // that.$api.OrderPay({ids: orderId, payment_code: 'wechatpay', payment_type:17, params:{}}).then(respay=>{
      // 	const params = respay.data.respData
      // 	uni.openEmbeddedMiniProgram({
      // 		appId: params.appId,
      // 		path: params.path,
      // 		success(res) {}
      // 	})
      // })
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f6f6;
}
.no-logged {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.navbar {
  height: calc(44px + var(--status-bar-height));
  /* #ifdef H5 */
  height: 44px;
  /* #endif */
  display: flex;
  background-color: #ffffff;
}

.talk-btn {
  height: 32px;
  margin-left: 10px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx !important;
  padding: 0 20rpx;
  border-radius: 50rem !important;

  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}

.tabs {
  height: 82rpx;
  border-top: 1px #ededed solid;
  display: flex;
  align-items: center;
  padding-left: 30rpx;

  .item {
    height: 100%;
    font-size: 30rpx;
    color: #666;
    font-weight: 400 !important;
    margin-right: 70rpx;
    display: flex;
    align-items: center;

    &.active {
      color: #f3c35c;
      border-bottom: 4rpx solid #f3c35c;
    }
  }
}

.swiper {
  width: 100%;
  height: calc(100vh - var(--status-bar-height) - 82rpx);
}

.history-order {
  width: 100%;
  height: 100%;
  position: relative;

  .menu {
    padding: 18rpx 30rpx;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #666;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    .item {
      padding: 14rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      &.active {
        color: #e0a32d;
        background-color: #777;
      }
    }
  }

  .history-order-swiper {
    width: 100%;
    height: 100%;
  }
}

.store-order-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #777;
  line-height: 1.3rem !important;

  image {
    width: 400rpx;
    height: 333rpx;
    margin-bottom: 40rpx;
  }
}

.orders-scroll {
  width: 100%;
  height: 100%;
}

.order-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30rpx;
  }

  .images {
    display: flex;
    padding: 30rpx 0;
    image {
      flex-shrink: 0;
      width: 150rpx;
      height: 112.5rpx;
    }
  }

  .info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: 26rpx;
      color: #666;
    }
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }
  }
}
</style>
